<template>
  <div id="dir">
    省/直辖市 <select v-model="province">
        <option v-for="(item, i) in list" :key="i" :value="item">{{item.name}}</option>
    </select>
    市 <select v-model="city">
        <option v-for="(item, i) in province.children" :key="i" :value="item">{{item.name}}</option>
    </select>
    区/县<select v-model="area">
       <option v-for="(item, i) in city.children" :key="i" :value="item">{{item.name}}</option>
    </select>
  </div>
</template>
<script>
export default {
  name: "dir",
  data() {
    return {
      // 定义选中的省份的数据
      province: {
        name: '',
        children: []
      },
      // d定义选中的市
      city: {
        name: '',
        children: []
      },
      // 定义县的数据
      area: {
        name: '',
        children: []
      },
      list: [
        {
          name: "河南省",
          children: [
            {
              name: "郑州市",
              children: [
                {
                  name: "中牟县"
                },{
                  name: "经开区"
                },{
                  name: "二七区"
                },{
                  name: "金水区"
                }
              ]
            },
            {
              name: "周口市"
            },
            {
              name: "新乡市"
            },
            {
              name: "南阳市"
            }
          ]
        },
         {
          name: "浙江省",
          children: [
            {
              name: "杭州市",
              children: [
                {
                  name: "江干区"
                },{
                  name: "西湖区"
                },{
                  name: "滨江区"
                },{
                  name: "余杭区"
                }
              ]
            },
            {
              name: "金华市"
            }
          ]
        }
      ]
    }
  },
  methods: {
  },
  watch: {
    province() {
      this.area = {
        name: '',
        children: []
      }
    }
  }
}
</script>
<style>
  .divBox{
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>